<template>
    <view class="page-container">
        <scroll-view scroll-y="true" class="page-body py-20 ">
            <view class="px-20">
                <form @submit="handleSubmit">
                    <view class="bg-ff box-shadows p-24 rounded-20 mb-32">
                        <view class="font-32 mb-14 font-bold">注册信息</view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>本人照片</view>
                            <view class="">
                                <up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"
                                    :maxCount="1"></up-upload>
                            </view>
                        </view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>姓名</view>
                            <view class="flex-1">
                                <input type="text" v-model="form.userName" placeholder="请输入姓名" required>
                            </view>
                        </view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>性别</view>
                            <view class="flex-1 flex items-center">
                                <picker class="w-full" @change="bindPickerChange" :value="sexindex" :range="sexList">
                                    <view class="picker">
                                        {{ sexList[sexindex] }}
                                    </view>
                                </picker>
                                <image class="w-16 h-26" src="/static/images/right.png" />
                            </view>
                        </view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>名族</view>
                            <view class="flex-1">
                                <input type="text" v-model="form.nation" placeholder="请输入名族" required>
                            </view>
                        </view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>邮箱</view>
                            <view class="flex-1">
                                <input type="text" v-model="form.email" placeholder="请输入邮箱" required>
                            </view>
                        </view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>出生年月</view>
                            <view class="flex-1 flex items-center">
                                <picker class="w-full" mode="date" :value="form.birthday" :start="startDate"
                                    :end="endDate" @change="bindDateChange">
                                    <view v-if="form.birthday" class="w-full">{{ form.birthday }}</view>
                                    <view v-else class="w-full text-gray">请选择日期</view>
                                </picker>
                                <image class="w-16 h-26" src="/static/images/right.png" />
                            </view>
                        </view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>身份证号</view>
                            <view class="flex-1">
                                <input type="text" v-model="form.idNumber" placeholder="请输入身份证号" required>
                            </view>
                        </view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>政治面貌</view>
                            <view class="flex-1">
                                <input type="text" v-model="form.political" placeholder="请输入政治面貌" required>
                            </view>
                        </view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>文化程度</view>
                            <view class="flex-1 flex items-center">
                                <picker class="w-full" @change="bindEducationChange" :value="educationindex"
                                    :range="educationList">
                                    <view v-if="form.education" class="w-full">{{ form.education }}</view>
                                    <view v-else class="w-full text-gray">请选择文化程度</view>
                                </picker>
                                <image class="w-16 h-26" src="/static/images/right.png" />
                            </view>
                        </view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>健康状态</view>
                            <view class="flex-1 flex items-center">
                                <picker class="w-full" @change="bindHealthChange" :value="healthindex"
                                    :range="healthList">
                                    <view v-if="form.health" class="w-full">{{ form.health }}</view>
                                    <view v-else class="w-full text-gray">请选择健康状态</view>
                                </picker>
                                <image class="w-16 h-26" src="/static/images/right.png" />
                            </view>
                        </view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>邮政编码</view>
                            <view class="flex-1">
                                <input type="number" v-model="form.postalCode" placeholder="请输入邮政编码">
                            </view>
                        </view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>联系电话</view>
                            <view class="flex-1">
                                <input type="number" v-model="form.phonenumber" placeholder="请输入联系电话">
                            </view>
                        </view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>通讯地址</view>
                            <view class="flex-1">
                                <input type="text" v-model="form.mailAddress" placeholder="请输入通讯地址">
                            </view>
                        </view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16"></text>工作单位</view>
                            <view class="flex-1">
                                <input type="text" v-model="form.workUnit" placeholder="请输入工作单位" required>
                            </view>
                        </view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16"></text>户口所在地</view>
                            <view class="flex-1">
                                <input type="text" v-model="form.permanentResidence" placeholder="请输入户口所在地" required>
                            </view>
                        </view>

                    </view>
                    <view class="bg-ff box-shadows p-24 rounded-20 mb-32">
                        <view class="font-32 mb-14 font-bold">紧急联系人</view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>姓名</view>
                            <view class="flex-1">
                                <input type="text" v-model="form.emergencyContactPerson" placeholder="请输入姓名" required>
                            </view>
                        </view>
                        <view class="py-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>联系电话</view>
                            <view class="flex-1">
                                <input type="text" v-model="form.emergencyContactPhone" placeholder="请输入联系电话" required>
                            </view>
                        </view>
                        </view>
                    <view class="bg-ff box-shadows p-24 rounded-20 mb-32">
                        <view class="font-32 mb-14 font-bold flex items-center"><text
                                class="text-FF1515 font-32 mr-10 pt-16">*</text>报名班级</view>
                        <view class="pt-24 isradio font-32">
                            <u-radio-group labelSize="10" v-model="classCaacindex" placement="column" @change="bindClassCaacChange">
                                <u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in classCaacList"
                                    :key="index" :label="item.name" :name="item.value">
                                </u-radio>
                            </u-radio-group>
                        </view>
                        <view class="flex justify-between items-center" v-if="classCaacName">
                            <view class=" flex items-center"><text class="text-FF1515 font-32 mr-10 pt-16">*</text>{{
                                classCaacName }}</view>
                            <view class="flex-1 flex items-center ml-24">
                                <picker class="w-full" @change="bindClassChange" :value="classindex" :range="classList">
                                    <view v-if="classindex !== null" class="w-full">{{ classList[classindex] }}</view>
                                    <view v-else class="w-full text-gray">班级类型</view>
                                </picker>
                                <image class="w-16 h-26" src="/static/images/right.png" />
                            </view>
                        </view>
                        <view class="pt-24">
                            <u-checkbox-group labelSize="10" v-model="checkboxValue1" placement="column" @change="checkboxChange">
                                <u-checkbox :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in checkboxList1"
                                    :key="index" :label="item.name" :name="item.value">
                                </u-checkbox>
                            </u-checkbox-group>
                        </view>
                    </view>
                    <view class="bg-ff box-shadows p-24 rounded-20 mb-32">
                        <view class="font-32 mb-14 font-bold flex items-center">
                            <text class="text-FF1515 font-32 mr-10 pt-16">*</text>班级信息
                        </view>
                        <view class="pt-24 flex justify-between items-center">
                            <view class="w-160 flex items-center"><text
                                    class="text-FF1515 font-32 mr-10 pt-16">*</text>班级信息</view>
                            <view class="flex-1 flex items-center">
                                <picker mode="multiSelector" class="w-full" @change="bindMultiPickerColumnChange" :value="multiIndex"
                                    :range="multiArray">
                                    <view v-if="form.deptId" class="w-full">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}</view>
                                    <view v-else class="w-full text-gray">请选择班级信息</view>
                                </picker>
                                <image class="w-16 h-26" src="/static/images/right.png" />
                            </view>
                        </view>
                    </view>
                    <view class="bg-ff box-shadows p-24 rounded-20 mb-32">
                        <view class="font-32 mb-14 font-bold flex items-center">其他信息</view>
                        <view class="py-24 flex items-center justify-between isradio">
                            <text>是否脱产学习</text>
                            <u-radio-group iconSize="20"  v-model="otherCaacindex" placement="row" @change="bindotherCaacChange">
                                <u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in otherCaacList"
                                    :key="index" :label="item.name" :name="item.value">
                                </u-radio>
                            </u-radio-group>
                        </view>
                        <view class=" flex items-center justify-between isradio">
                            <text>是否有无人机或航模操作经历 </text>
                            <u-radio-group iconSize="20" v-model="otherCaacindex2" placement="row" @change="bindotherCaacChange2">
                                <u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in otherCaacList2"
                                    :key="index" :label="item.name" :name="item.value">
                                </u-radio>
                            </u-radio-group>
                        </view>
                    </view>
                    <view>
                        <u-radio-group labelSize="10" iconSize="20"  v-model="otherCaacindex3" placement="row" @change="bindotherCaacChange3">
                                <u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in otherCaacList3"
                                    :key="index" :label="item.name" :name="item.value">
                                </u-radio>
                            </u-radio-group>
                    </view>
                   <view class="box-btn">
                    <button formType="submit">提交</button>
                    <view class="h-100"></view>
                   </view>
                </form>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import utils from '@/utils/utils.js'
import {system,customer} from '@/api/index.js'
import useUserStore from '@/store/user.js'
const useStore = useUserStore()
import dayjs from 'dayjs'
const form = ref({
    avatar: "",
    birthday: "",
    classApplication: "",
    classCaac: null,
    classCommission: "",
    deptId: 0,
    education: "",
    email: "",
    emergencyContactPerson: "",
    emergencyContactPhone: "",
    health: "",
    idNumber: "",
    mailAddress: "",
    nation: "",
    offJobLearn: "",
    operatingExperience: "",
    permanentResidence: "",
    phonenumber: "",
    political: "",
    postalCode: "",
    sex: 0,//性别
    userId: null,
    userName: "",
    workUnit: ""
})
const sexList = ['男', '女', '未知']
//上传图片
const fileList1 = ref([])
const deletePic = (event) => {
    fileList1.value = []
    form.value.avatar = ''
}
const afterRead = (event) => {
    uni.uploadFile({
        url: import.meta.env.VITE_API_URL + '/api/register/updatePicture',
        filePath: event.file.url,
        name: "file",
        formData: {
            user: "test",
        },
        success: (res) => {
            if (res.statusCode === 200) {
                let data = JSON.parse(res.data)
                console.log('上传成功', data)
                form.value.avatar = data.data.url || ''
                fileList1.value = [{ url: event.file.url }]
                console.log('form', form.value)
            }

        },
    })
}
//选择性别
const sexindex = ref(0)
const bindPickerChange = (e) => {
    sexindex.value = e.detail.value
    form.value.sex = e.detail.value
}
//选择出生日期
const startDate = dayjs().subtract(80, 'year').format('YYYY-MM-DD')
const endDate = dayjs().format('YYYY-MM-DD')
const bindDateChange = (e) => {
    form.value.birthday = e.detail.value
}
//选择文化程度
const educationList = ['小学', '初中', '高中', '专科', '本科', '硕士', '博士', '其他']
const educationindex = ref(null)
const bindEducationChange = (e) => {
    educationindex.value = e.detail.value
    form.value.education = educationList[e.detail.value]
}
//选择健康状态
const healthList = ['健康', '良好', '一般', '‌疾病']
const healthindex = ref(null)
const bindHealthChange = (e) => {
    healthindex.value = e.detail.value
    form.value.health = healthList[e.detail.value]
}
//报名班级
const classCaacList = [{ name: 'CAAC多旋翼视距内班', value: 1 }, { name: 'CAAC多旋翼超视距班', value: 2 }]
const classCaacindex = ref(null)
const classCaacName = ref('')
const bindClassCaacChange = (e) => {
    console.log('e', e)
    classCaacindex.value = e
    classCaacName.value = classCaacList[e - 1].name
}
//班级类型
const classList = ['小型无人机', '中型无人机']
const classindex = ref(null)
const bindClassChange = (e) => {
    console.log('e', e)
    classindex.value = Number(e.detail.value)
    // form.value.class = classList[e.detail.value]
}
//班级列表
const checkboxList1 = [{ name: '应用技术班', value: 1 }, { name: '委培就业班', value: 2 }]
const checkboxValue1 = ref([])
const checkboxChange = (e) => {
    console.log('e', e)
    checkboxValue1.value = e
    form.value.classApplication = e.includes(1) ? 1 : ''
    form.value.classCommission = e.includes(2) ? 1 : ''
}

// 班级信息
const DeptTree = ref([])
const multiArray = ref([[], []])
const multiIndex = ref([])
const bindMultiPickerColumnChange = (e) => {
    console.log('e', e)
    multiIndex.value = e.detail.value
    form.value.deptId = DeptTree.value[e.detail.value[0]].children[e.detail.value[1]].deptId
    console.log('form', form.value)
}
const getDeptTree = () => {
    multiArray.value = [[], []]
    system.getClasses().then(res => {
        DeptTree.value = res.data || []
        DeptTree.value.forEach(item => {
            multiArray.value[0].push(item.deptName)
            multiArray.value[1]=item.children.map(item=>item.deptName)
        });
        console.log('DeptTree', DeptTree.value)
        console.log('multiArray', multiArray.value)
    })
}
// 其他信息
const otherCaacList =[{ name: '是', value: '1' }, { name: '否', value: '0' }]
const otherCaacindex = ref(null)
const bindotherCaacChange = (e) => {
    console.log('e', e)
    form.value.offJobLearn = e
    otherCaacindex.value = e
}
const otherCaacList2 =[{ name: '是', value: '1' }, { name: '否', value: '0' }]
const otherCaacindex2 = ref(null)
const bindotherCaacChange2 = (e) => {
    console.log('e', e)
    form.value.operatingExperience = e
    otherCaacindex2.value = e
}
const otherCaacList3 =[{ name: '本人承诺以上信息及相关附件材料全部属实，如有虚假，由此引发的一切后果由本人承担。', value: '1' }]
const otherCaacindex3 = ref(null)
const bindotherCaacChange3 = (e) => {
    console.log('e', e)
    otherCaacindex3.value = e
}

getDeptTree()
const showModal = (text,back) => {
    uni.showModal({
        title: '提示',
        content: text,
        showCancel: false,
        success: (res) => {
            if (res.confirm) {
                console.log('用户点击确定',text)
                if(back){
                    uni.navigateBack()
                }
            }
        }
    })
}
const handleSubmit = (event) => {
    // event.preventDefault()
    console.log('form', form.value)
    if(!form.value.avatar) return showModal('请上传头像')
    if(!form.value.userName) return showModal('请输入姓名')
    if(!form.value.nation) return showModal('请选择民族')
    if(!form.value.email) return showModal('请输入邮箱')
    if(!utils.isEmail(form.value.email)) return showModal('请输入正确的邮箱')
    if(!form.value.birthday) return showModal('请选择出生日期')
    if(!form.value.idNumber) return showModal('请输入身份证号')
    //政治面貌
    if(!form.value.political) return showModal('请选择政治面貌')
    if(!form.value.education) return showModal('请选择文化程度')
    if(!form.value.health) return showModal('请选择健康状态')
    if(!form.value.postalCode) return showModal('请输入邮政编码')
    if(!form.value.phonenumber) return showModal('请输入手机号')
    if(!utils.isPhone(form.value.phonenumber)) return showModal('请输入正确的手机号')
    if(!form.value.mailAddress) return showModal('请输入通讯地址')
    if(!form.value.emergencyContactPerson) return showModal('请输入紧急联系人')
    if(!form.value.emergencyContactPhone) return showModal('请输入紧急联系人电话')
    //判断紧急联系人电话是否合法
    if(!utils.isPhone(form.value.emergencyContactPhone)) return showModal('请输入正确的紧急联系人电话')
    if(classCaacindex.value === null || classindex.value === null) return showModal('请选择报名班级和班级类型')
    if(!form.value.deptId) return showModal('请选择班级信息')
    if(!otherCaacindex3.value) return showModal('请阅读并同意协议') 
    console.log('报名班级:', classCaacindex.value, '班级类型:',classindex.value)
    if(classCaacindex.value ===1){
        form.value.classCaac = Number(classCaacindex.value+classindex.value)
    }else if(classCaacindex.value ===2){
        form.value.classCaac = Number(classCaacindex.value+classindex.value + 1)
    }
    form.value.userId = useStore.uid
    console.log('form', form.value)
    customer.register(form.value).then(res => {
        console.log('报名结果:', res)
        if (res.code === 0) {
            showModal(res.msg,true)
        }else{
            showModal(res.msg)
        }
    })
}
//获取报名信息
const applyInfo = ref({value:'',auditOpinion:""})
const getRegisterInfo = () => {
    customer.getRegisterInfo({userId:useStore.uid}).then(res => {
        console.log('报名信息:', res) 
           if (res.code === 0) {
              if(res.data){
                 applyInfo.value = res.data.auditStatus || '0'
                 applyInfo.auditOpinion = res.data.auditOpinion || ''
                 if(applyInfo.value === '0'){
                    showModal('报名审核中，请耐心等待',true)
                 }
                 if(applyInfo.value === '1'){
                    showModal('您已报名成功！',true)
                 }
                 if(applyInfo.value === '2'){
                    showModal(applyInfo.auditOpinion?applyInfo.auditOpinion:'报名失败，请重新报名')
                    // getFormValue(res.data)
                 }
              }
            }else{
                showModal(res.msg)
            }
    })
}
// 表单回显
const getFormValue = (data={}) => {
    console.log('回显',data)
   for(let key in form.value){
         if(data[key]){
             form.value[key] = data[key]
         }
   }
}
getRegisterInfo()
</script>
<style scoped lang="scss">
::v-deep(.isradio) {
  .u-radio-group{
    justify-content: flex-end;
  }
}
.box-btn{
    margin: 30rpx 0 30rpx;
    button{
    width: 690rpx;
    height: 92rpx;
    line-height: 92rpx;
    text-align: center;
    background-color: #1881F7;
    border-radius: 100rpx;
    font-size: 32rpx;
    color: #FFFFFF;
    font-weight: bold;
    } 
}
</style>